import React, { Fragment } from 'react';
import { Link } from 'react-router-dom';
import Title from 'component/title/title.jsx';
import IcoBox from 'component/icobox/icobox.jsx';
import Footer from 'component/footer/footer.jsx';
import './user.scss'
class UserCenter extends React.Component {
    constructor(props) {
        super(props);
        this.state = { codeShow: false, imgarr: { home: '/src/static/image/home.png', join: '/src/static/image/join.png', user: '/src/static/image/my-active.png' } }
    }
    componentWillMount() {
        this.setState({ userInfo: { username: '林志伟', url: '/src/static/image//usertest.png', type: '味爱地图股东', balance: '2000', scare: '1000', voucher: '9', income: '100' } });
    }
    goPage(val) {
        this.props.history.push(val);
    }
    codeshow() {
        this.setState({ codeShow: !this.state.codeShow })
    }
    goInfo() {
        this.props.history.push('/userInfo');
    }
    render() {
        return (
            <div>
                <div id="user">
                    <div className="user-head">
                        <i className="code iconfont icon-erweima xxl" onClick={e => { this.codeshow(e) }} ></i>
                        <img src={this.state.userInfo.url} alt="" className="avator" onClick={e => this.goInfo(e)} />
                        <div className="name xl">{this.state.userInfo.username}</div>
                        <div className="type l">(<span className="rank">{this.state.userInfo.type}</span>)</div>
                    </div>
                    <div className="order-wrapper">
                        <ul className="underline">
                            <Title name='我的订单' more='查看全部订单' ico='icon-shiliangzhinengduixiang' url='/orderList' goPage={e => { this.goPage(e) }} />
                        </ul>
                        <div className="flex order-group">
                            <IcoBox ico='icon-daifukuan' name=' 待付款' type='left' url='/orderList/init' goPage={e => { this.goPage(e) }} />
                            <IcoBox ico='icon-meishi' name=' 待送餐' type='left' url='/orderList/send' goPage={e => { this.goPage(e) }} />
                            <IcoBox ico='icon-waimai1' name=' 待收货' type='left' url='/orderList/harvest' goPage={e => { this.goPage(e) }} />
                            <IcoBox ico='icon-yiwanchengdingdan' name=' 已完成' url='/orderList/complete' type='left' goPage={e => { this.goPage(e) }} />
                        </div>
                    </div>
                    <div className="order-wrapper">
                        <Title name='我的资产' ico='icon-asset' />
                        <div className="flex order-group">
                            <IcoBox img='/src/static/image/ico-money.png' name='账号余额' url='/404' goPage={e => { this.goPage(e) }}> <div className="hui l price">{this.state.userInfo.balance}</div></IcoBox>
                            <IcoBox img='/src/static/image/ico-good.png' name='积分商城' url='/404' goPage={e => { this.goPage(e) }} > <div className="hui l">{this.state.userInfo.scare}分</div></IcoBox>
                            <IcoBox img='/src/static/image/ico-juan.png' name='代金券' url='/' > <div className="hui l"> {this.state.userInfo.voucher}张</div></IcoBox>
                            <IcoBox img='/src/static/image/ico-income.png' name='股东收益' url='/404' goPage={e => { this.goPage(e) }} > <div className="hui l price"> {this.state.userInfo.income}</div> </IcoBox>
                        </div>
                    </div>
                    <div className="order-wrapper">
                        <Title name='其他' ico='icon-qiehuan' />
                        <div className="flex order-group">
                            <IcoBox img='/src/static/image/ico-team.png' name='我的团队' url='/404' goPage={e => { this.goPage(e) }} />
                            <IcoBox img='/src/static/image/ico-map.png' name='我的地址' url='/address' goPage={e => { this.goPage(e) }} />
                        </div>
                    </div>
                </div>
                <Footer imgarr={this.state.imgarr} />
                {this.state.codeShow && <div className="expand" onClick={e => { this.codeshow(e) }}></div>}
            </div>
        )
    }
}
export default UserCenter;